<template>
  <div>
      <div style="margin:20px auto; width:80%; font-size:18px;">
          <h1>添加商品</h1>
          <p>名称：<input type="text" v-model="goods_name"></p>
          <p>价格：<input type="text" v-model="goods_price"></p>
          <p>单位：<input type="text" v-model="goods_unit"></p>
          <p>简介：<textarea cols="30" rows="10" v-model="goods_describe"></textarea></p>
          <p>详情：<mavon-editor v-model="content" ref="md" @change="change" style="min-height: 600px" /></p>
          <p>图片：<input type="file" id='img'></p>
          <p>分类：
              <select v-model="cate">
                  <option :value="i.id" v-for="i in catelist" :key="i.id">{{i.cate_name}}</option>
              </select>
          </p>
          <p style="text-align:center">
              <input type="button" value="提交" @click="add_goods" style="width:70px; height:30px;">
          </p>
      </div>
  </div>
</template>

<script>
import axios from 'axios'
import { mavonEditor } from 'mavon-editor'
// 引入编辑器样式 
import 'mavon-editor/dist/css/index.css'
export default {
    components:{
        mavonEditor
    },
    data() {
        return {
            content:'',  // 输入的Markdown文档
            html:'',  // 转成html
            catelist:[],
            cate:'1',
            goods_name:'',
            goods_price:'',
            goods_unit:'',
            goods_describe:'',
        }
    },
    methods:{
        add_goods() {
            var file=document.getElementById('img').files[0]
            let fdata=new FormData()
            fdata.append('goods_name',this.goods_name)
            fdata.append('goods_price',this.goods_price)
            fdata.append('goods_unit',this.goods_unit)
            fdata.append('goods_describe',this.goods_describe)
            fdata.append('cate',this.cate)
            fdata.append('goods_content',this.html)
            fdata.append('goods_img',file)
            axios({
                url:'http://127.0.0.1:8000/app01/addgoods/',
                method:'post',
                data:fdata
            }).then(resp=>{
                console.log(resp.data)
            })
        },
        // 获取分类信息
        get_cate() {
            axios({
                url:'http://127.0.0.1:8000/app01/catelist/',
                method:'get'
            }).then(resp=>{
                console.log(resp.data)
                this.catelist=resp.data
            })
        },
        // 检查Markdown文档内容变化
        change(value,render) {
            this.html=render
            console.log(this.html)
        }
    },
    created() {
        this.get_cate()
    }
}
</script>

<style>

</style>